<!DOCTYPE html>
<html>
<head>
  {% load static %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link rel="stylesheet" href="{% static './layui/css/layui.css' %}"    media="all">
    <style>
        body{
            padding: 50px;
        }
    </style>
</head>
<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">python成绩</li>
    <li>java成绩</li>
    <li>vue成绩</li>
    <li>linux成绩</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">
        <div id="python" style="width: 600px;height:400px;"></div>
    </div>
    <div class="layui-tab-item">
        <div id="java" style="width: 600px;height:400px;"></div>
    </div>
    <div class="layui-tab-item">
        <div id="vue" style="width: 600px;height:400px;"></div>
    </div>
    <div class="layui-tab-item">
        <div id="linux" style="width: 600px;height:400px;"></div>
    </div>
  </div>
</div>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="{% static './layui/layui.js'%}"></script>
<script src="{% static './jquery/jquery-3.7.1.min.js'%}"></script>
<!-- 引入 ECharts -->
<script src={% static './echarts/echarts.min.js'%}></script>
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element;

  //触发事件
  var active = {
    tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })
    }
    ,tabDelete: function(othis){
      //删除指定Tab项
      element.tabDelete('demo', '44'); //删除：“商品管理”


      othis.addClass('layui-btn-disabled');
    }
    ,tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    }
  };

  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });

  //Hash地址的定位
  var layid = location.hash.replace(/^#test=/, '');
  element.tabChange('test', layid);

  element.on('tab(test)', function(elem){
    location.hash = 'test='+ $(this).attr('lay-id');
  });

});
</script>
<script>
    {#python#}
    var myChart = echarts.init(document.getElementById('python'));
    // 指定图表的配置项和数据
    var option = {
        // 在这里配置你的图表选项
        title: {
            text: '23大数据Python成绩'
        },
        tooltip: {},
        legend: {
            data:['分数']
        },
        xAxis: {
            data: {{ name|safe }}
        },
        yAxis: {},
        series: [{
            name: '分数',
            type: 'bar',
            data: {{ python_score|safe }}
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    {#java#}
    var myChart_java = echarts.init(document.getElementById('java'));
    // 指定图表的配置项和数据
    var option_java = {
        // 在这里配置你的图表选项
        title: {
            text: '23大数据Java成绩'
        },
        tooltip: {},
        legend: {
            data:['分数']
        },
        xAxis: {
            data: {{ name|safe }}
        },
        yAxis: {},
        series: [{
            name: '分数',
            type: 'bar',
            data: {{ java_score|safe }}
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart_java.setOption(option_java);
    {#vue#}
    var myChart_java = echarts.init(document.getElementById('vue'));
    // 指定图表的配置项和数据
    var option_java = {
        // 在这里配置你的图表选项
        title: {
            text: '23大数据Java成绩'
        },
        tooltip: {},
        legend: {
            data:['分数']
        },
        xAxis: {
            data: {{ name|safe }}
        },
        yAxis: {},
        series: [{
            name: '分数',
            type: 'bar',
            data: {{ java_score|safe }}
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart_java.setOption(option_java);
    {#linux#}
    var myChart_java = echarts.init(document.getElementById('linux'));
    // 指定图表的配置项和数据
    var option_java = {
        // 在这里配置你的图表选项
        title: {
            text: '23大数据Java成绩'
        },
        tooltip: {},
        legend: {
            data:['分数']
        },
        xAxis: {
            data: {{ name|safe }}
        },
        yAxis: {},
        series: [{
            name: '分数',
            type: 'bar',
            data: {{ java_score|safe }}
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart_java.setOption(option_java);

</script>
</body>
</html>